import React, { useRef } from "react";

import { connect } from "react-redux";

import actions from "../store/action/index";

function AddTodo(props) {
  const inputEl = useRef(null);
  function addText() {
    let value = inputEl.current.value;
    if (!value.trim()) {
      return;
    }
    props.dispatch(actions.addTodo(value));
    inputEl.current.value = "";
  }
  return (
    <div className="todoBox">
      <input type="text" name="content" ref={inputEl} />
      <button onClick={addText}>Add Todo</button>
    </div>
  );
}
export default connect()(AddTodo);
